<template>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="地址">
          <el-input v-model="formInline.address" placeholder="请输入地址" clearable />
        </el-form-item>
        <el-form-item label="最小年龄">
          <el-input v-model="formInline.minAge" placeholder="请输入最小年龄" clearable />
        </el-form-item>
        <el-form-item label="最大年龄">
          <el-input v-model="formInline.maxAge" placeholder="请输入最大年龄" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      
      <el-table :data="tableData" style="width: 100%">
         <el-table-column prop="username" label="用户名" width="140" />
                <el-table-column prop="email" label="邮政" width="120" />
                <el-table-column prop="address" label="地址" />
                <el-table-column prop="phone" label="手机号" />
                <el-table-column prop="age" label="年龄" />
                <el-table-column prop="gender" label="性别" />
                <el-table-column prop="createdAt" label="创建时间" />
                <el-table-column prop="updatedAt" label="修改时间" />
        <el-table-column fixed="right" label="Operations" min-width="120">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="update(scope.row)">
              更新
            </el-button>
            <el-button link type="primary" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    
      <el-pagination background layout="prev, pager, next" :total="total" :page-size="10" @current-change='page' />
    
    </template>
    
    <script lang="ts" setup>
    import {ref,onMounted, reactive} from 'vue'
    import axios from 'axios'
    import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
    const router=useRouter()

    const tableData = ref([])
    const total=ref(0)
    const address=ref('')
    const minAge=ref(null)
    const maxAge=ref(null)
    const formInline = reactive({
      address: '',
      minAge: null,
      maxAge: null,
    })
    
    const onSubmit = () => {
      address.value=formInline.address
      minAge.value=formInline.minAge
      maxAge.value=formInline.maxAge
      loadData()
    }
    const reset = () => {
      formInline.address=''
      formInline.minAge=null
      formInline.maxAge=null
    }
    
    const loadData=(pageNum:number=1)=>{
      axios.get('http://113.45.160.83:8080/find',{
        params:{pageNum,
          address:address.value,
          minAge:minAge.value,
          maxAge:maxAge.value
        }}).then(function(resp){
        tableData.value = resp.data.records
        total.value=resp.data.total
      })
    }
    const page=(pageNum:number)=>{
      loadData(pageNum);
    }
    const update=(row:any)=>{
      console.log(row);
      router.push({
        path:'update',
        query:{
          username:row.username
        }
      })
    }
    
    onMounted(() => {
        loadData()
        })
    </script>
    
    
    